<!-- <template>
    <div class="menu-container">
        菜单排序
        <div class="tabbar-box">

<tabbar @bindClick="bindClickMenu" ></tabbar>
        </div>
    </div>
</template>

<script>
import tabbar from '../../layout/bar/tabbar.vue';

export default{
    components:{
        tabbar
    }
    ,
    methods:{
      bindClickMenu(arg){
        console.log("传入菜单参数",arg)
      } 
    }
}

</script>
    
<style lang="less" scoped>
.tabbar-box{
    height:100%;
}

</style>
 -->

 <!-- <template>
  侧栏
  <el-container>
   <el-aside width="200px">

          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">

 </el-radio-group>
 <el-menu
   default-active="2"
   class="el-menu-vertical-demo"
   :collapse="isCollapse"
   @open="handleOpen"
   @close="handleClose"
   @select="handleClick"
 >
 <el-sub-menu index="0">
     <template #title>
       <el-icon><location /></el-icon>
       <span>首页</span>
     </template>
     <el-menu-item-group>
     </el-menu-item-group>
    
   </el-sub-menu>
   <el-sub-menu index="1">
     <template #title>
       <el-icon><location /></el-icon>
       <span>系统管理</span>
     </template>
     <el-menu-item-group>
       <el-menu-item index="1-1">角色管理</el-menu-item>
       <el-menu-item index="1-2">登录日志</el-menu-item>
      <el-menu-item index="1-3">菜单排序</el-menu-item>
       <el-menu-item index="1-4">操作日志</el-menu-item>
     </el-menu-item-group>
   </el-sub-menu>


     <el-sub-menu index="2">
       <template #title>
         <el-icon><location /></el-icon>
         <span>人事管理</span>
       </template>
       <el-menu-item-group>
         <el-menu-item index="2-1">人事管理</el-menu-item>
       </el-menu-item-group>
     
     </el-sub-menu>


     <el-sub-menu index="3">
       <template #title>
         <el-icon><location /></el-icon>
         <span>日程管理</span>
       </template>
       <el-menu-item-group>
         <el-menu-item index="3-1">部门日程</el-menu-item>
         <el-menu-item index="3-2">我的日程</el-menu-item>
         <el-menu-item index="3-3">我的便签</el-menu-item>
       
       </el-menu-item-group>
     
     </el-sub-menu>


     <el-sub-menu index="4">
       <template #title>
         <el-icon><location /></el-icon>
         <span>文档管理</span>
       </template>
       <el-menu-item-group>
         <el-menu-item index="4-1">文档搜索</el-menu-item>
         <el-menu-item index="4-2">文档管理</el-menu-item>
         <el-menu-item index="4-3">回收站</el-menu-item>
       
       </el-menu-item-group>
     
     </el-sub-menu>


     <el-sub-menu index="5">
       <template #title>
         <el-icon><location /></el-icon>
         <span>流程管理</span>
       </template>
       <el-menu-item-group>
         <el-menu-item index="5-1">请假流程</el-menu-item>
         <el-menu-item index="5-1">报销流程</el-menu-item>
       </el-menu-item-group>
     
     </el-sub-menu>

     <el-sub-menu index="6">
       <template #title>
         <el-icon><location /></el-icon>
         <span>考勤管理</span>
       </template>
       <el-menu-item-group>
         <el-menu-item index="6-1">考勤统计</el-menu-item>
         <el-menu-item index="6-1">考勤历史记录</el-menu-item>
       </el-menu-item-group>
     
     </el-sub-menu>

     <el-sub-menu index="7">
       <template #title>
         <el-icon><location /></el-icon>
         <span>信息</span>
       </template>
       <el-menu-item-group>
         <el-menu-item index="7-1">信箱</el-menu-item>
       </el-menu-item-group>
     
     </el-sub-menu>


 </el-menu>
     
 
   </el-aside>
 </el-container>
</template>

<script lang="ts" setup>
// 侧栏
import { ref } from 'vue'
import {
 Document,
 Menu as IconMenu,
 Location,
 Setting,
} from '@element-plus/icons-vue'
const emit =defineEmits(["bindClick"])

const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
 console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
 console.log(key, keyPath)
}

const handleClick=(index:any,item:any)=>{
console.log('tabbar-index',index)
console.log('tabbar-item',item)

 emit("bindClick",index,item)
}
</script>

<style scoped lang="less">
.el-aside {
   background-color: #D3DCE6;
   color: #333;
   text-align: center;
   height: 718px;
 }
 
 .el-main {
   background-color: #E9EEF3;
   color: #333;
   text-align: center;
   line-height: 700px;
 }
 
 body > .el-container {
   margin-bottom: 40px;
 }

 .main:active .all{
   display: block;
 }

 .el-sub-menu__title {
   margin-top: 18px;
   font-size: 16px;
   color:rgb(254,139,12);
   
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
 width: 200px;
 min-height: 400px;
 background-color: #D3DCE6;

}


.el-sub-menu .el-menu-item{
   background-color: rgba(128, 216, 207,.3);
   // background-color: rgba(254,139,12,.4);

  
}

:deep .el-menu-item-group__title{
   padding: 0px;
}
</style> -->

 <template>
 <div>
      <h2>菜单排序</h2>
      <!-- <ul>
         <li v-for=(item,index) in menu :key="item.id">
           <span>{{ item.name }}</span>
           <button @click="moveUp(index)" :disabled="index === 0">&#x25B2;</button>
           <button @click="moveDown(index)" :disabled="index === menu.length - 1">&#x25BC;</button> 
         </li>
       </ul> -->
       <button @click="moveUp" >上移</button>
       <button >下移</button>

    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        item: [
          { id: 1, name: "菜单项1" },
          { id: 2, name: "菜单项2" },
          { id: 3, name: "菜单项3" },
          { id: 4, name: "菜单项4" },
        ],
      };
    },
    methods: {
      moveUp(e) {
        console.log(e.target.index)
        
        // if (index > 0) {
        //   const item = this.menu.splice(index, 1)[0];
        //   this.menu.splice(index - 1, 0, item);
        // }
      },
      moveDown(index) {
        if (index < this.menu.length - 1) {
          const item = this.menu.splice(index, 1)[0];
          this.menu.splice(index + 1, 0, item);
        }
      },
    },
  };
 </script>




<!-- <template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
        <button @click="moveUp(index)">上移</button>
        <button @click="moveDown(index)">下移</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          id: 1, name: "菜单项1", child: {
            menuChild: [
              { id: 1-1, name: "菜单项1-1" },
              { id: 1-2, name: "菜单项1-2" },
              { id: 1-3, name: "菜单项1-3" },
              { id: 1-4, name: "菜单项1-4" },
            ],
          }
        },
        {
          id: 2, name: "菜单项2", child: {
            menuChild: [
              { id: 2-1, name: "菜单项2-1" },
              { id: 2-2, name: "菜单项2-2" },
              { id: 2-3, name: "菜单项2-3" },
              { id: 2-4, name: "菜单项2-4" },
            ],
          }
        },
        {
          id: 3, name: "菜单项3", child: {
            menuChild: [
              { id: 3-1, name: "菜单项1-1" },
              { id: 3-2, name: "菜单项1-2" },
              { id: 3-3, name: "菜单项1-3" },
              { id: 3-4, name: "菜单项1-4" },
            ],
          }
        },
      ],
    }
  },
  methods: {
    moveUp(index) {
      if (index > 0) {
        // 交换当前项与前一项的位置
        [this.list[index - 1], this.list[index]] = [this.list[index], this.list[index - 1]]
      }
    },
    moveDown(index) {
      if (index < this.list.length - 1) {
        // 交换当前项与后一项的位置
        [this.list[index], this.list[index + 1]] = [this.list[index + 1], this.list[index]]
      }
    }
  }
}
</script> -->